.group-container {
    width: 100%;
    height: calc(100vh - 300px);
    padding: 0 24px;
    min-width: 820px;

    .group-box {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: calc(100vh - 270px);
        overflow-y: auto;
        border-radius: 4px;
        transform: translateY(-42px);
        .el-tabs--border-card{
            border: none;
        }
        .group-tabs {
          .group-tabs-item {
            // height: 785px;
              .group-tab-header {
                  display: flex;
                  justify-content: space-between;
                  .group-btn {
                    border-radius: 4px !important;
                    width: 96px;
                    background-color: rgb(99, 149, 253);
                  }
                  .group-right-btn {
                    display: flex;
                    gap: 8px;

                    .group-btn-search {
                      width: 400px;
                      height: 32px;

                      .el-input__icon {
                        font-size: 16px;
                      }

                      .el-input__inner {
                        font-size: 12px !important;
                        line-height: 16px;
                      }

                      .el-input__wrapper {
                        padding-right: 8px !important;
                      }
                      }
  
                      .group-btn-switch {
                      box-sizing: border-box;
                      display: flex;
                      align-items: center;
                      width: 64px;
                      height: 32px;
                      border: 1px solid var(--o-border-color-light);
                      border-radius: 4px;
                      overflow: hidden;
  
                      .group-btn-switch-icon {
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          width: 32px;
                          height: 32px;
                          cursor: pointer;
  
                          .el-icon {
                          color: #8d98aa;
                          font-size: 16px !important;
                          }
                      }
  
                      .bgThumb {
                          height: 32px;
                          background: rgb(99 149 253);
  
                          .el-icon {
                          color: white;
                          font-size: 16px !important;
                          }
                      }
                      }
                  }
              }
              .group-content-container{
                min-height: calc(100vh - 458px);
                margin-top: 16px;
                margin-bottom: 16px;
                .group-card-empty-mid{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100%;
                  .group-card-empty{
                    width: 100%;
                    height: 100%;
                  }
                }
              .group-tabs-content {
                  margin-top: 16px;
                  display: flex;
                  justify-content: space-between;
                  display: grid;
                  grid-template-columns: repeat(auto-fill, 339px);
                  gap: 16px;
                  max-height: 660px;
                  overflow-y: auto;
                  .group-card-item {

                        width: 339px;
                        height: 124px;
                        border-radius: 8px;
                        background-color: var(--o-bg-color-light);
                        padding: 16px;
                        cursor: pointer;

                        .group-card-title {
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          .group-card-title-name {
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 24px;
                            color: var(--o-text-color-primary);
                          }

                          .card-type {
                            border-radius: 2px;
                            width: 40px;
                            height: 16px;
                            color: white;
                            text-align: center;
                            font-size: 12px;
                            line-height: 16px;
                          }

                          .card-type-public {
                            background-color: rgb(36, 171, 54);
                          }

                          .card-type-privacy {
                            background-color: rgb(235, 175, 0);
                          }
                        }

                        .group-card-desc {
                          width: 307px;
                          height: 32px;
                          font-size: 12px;
                          line-height: 16px;
                          color: var(--o-text-color-secondary);
                          margin: 4px 0 16px;
                          display: -webkit-box;          /* 旧版 Flexbox 兼容（必须） */
                          -webkit-line-clamp: 2;         /* 限制显示行数 */
                          -webkit-box-orient: vertical;  /* 垂直方向排列 */
                          overflow: hidden;              /* 隐藏超出部分 */
                          text-overflow: ellipsis;       /* 超出时显示省略号 */
                          word-break: break-word;        /* 单词换行 */ 
                      }
  
                      .group-card-footer {
                          display: flex;
                          justify-content: space-between;
                          align-items:center;
                          .info {
                              font-size: 12px;
                              color: var(--o-text-color-tertiary);
                              line-height: 16px;
                              display: flex;
                              align-items: center;
                              .member-count{
                                margin-left: 16px;
                                display: flex;
                                gap: 4px;
                              }
                          }
                          button{
                            height: 16px;
                          }
                      }
                  }
              }
              .group-table-box {
                  padding: 0 0 24px;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  gap: 24px;
                  min-height: 200px;
              
                  tbody {
                    td {
                      border-right: unset !important;
                    }
                  }
              
                  .el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell {
                    border-right: unset !important;
                  }
              
                  .el-table__header {
                    width: 100% !important;
              
                    height: 32px;
                    box-shadow: inset 0 -1px 0 0 rgb(223 229 239);
              
                    thead tr th {
                      background-color: #f4f6fa;
                    }
                  }

                  .el-table__body-wrapper{
                    max-height: 660px;
                    overflow-y: auto
                  }
              
                  .group-name-row {
                    color: rgb(99 149 253);
                    font-size: 12px;
                    font-weight: 500;
                    cursor: pointer;
                  }
              
                  .group-id {
                    .el-icon {
                      color: #8d98aa;
                    }
                  }

                .card-type {
                  display: inline-block;
                  border-radius: 2px;
                  width: 40px;
                  height: 16px;
                  color: white;
                  text-align: center;
                  font-size: 12px;
                  line-height: 16px;
                }

                .card-type-public {
                  background-color: rgb(36, 171, 54);
                }

                .card-type-privacy {
                  background-color: rgb(235, 175, 0);
                  }
              
                  .el-table__body {
                    width: 100% !important;
              
                    .el-table__row {
                      height: 48px;
                    }
                  }

                  .el-table__cell {
                    padding: 0 8px !important;
                    font-size: 12px;
                  }

                  .el-table--border .el-table__cell:first-child .cell {
                    padding: 0 12px !important;
                  }

                  .el-table-column--selection .cell {
                    padding-right: 0 !important;
                    padding-left: 22px;
                  }

                  .group-selection::after {
                    content: unset !important;
                  }

                  .el-pagination {
                    margin-top: 0;
                  }

                  .el-pagination .el-input__inner {
                    height: var(--el-input-inner-height) !important;
                  }
                }
              }
              .group-pagination{
                margin-bottom: 24px;
              }
          }
          .el-tabs__content{
            padding: 16px 24px 0 !important;
            background-color: var(--o-bg-color-base);
            border-radius: 0 8px 8px 8px;
            height: calc(100vh - 322px);
          }
          .el-tabs__header{
            margin-bottom: 0px;
            border: unset !important;
          }
          
          .el-tabs__header .el-tabs__nav{
            border: unset !important;
          }
          .el-tabs__header .el-tabs__item{
            border: unset !important;
            color: var(--o-text-color-secondary) !important;
            font-weight: 500 !important;
            background-color: var(--o-bg-color-base) !important;
            height: 36px !important;
            width: 104px !important;
            align-items: flex-start !important;
            line-height: 22px;
            padding: 9px 24px 5px !important;
            font-family: 'HarmonyOS Sans SC Regular';
              &.is-active{
              color: rgb(99, 149, 253) !important;
              font-weight: 500 !important;
              height: 40px !important;
            }
          }
        }
    }
}